<template>
    <div>

      <el-container>
        <el-main>
        <br>
        <br>
        <div class="control-row">
          <el-select v-model="selectPort" placeholder="请选择需要打开的串口">
            <el-option v-for="item in ports" :key="item.value" :label="item.name" :value="item.value">
            </el-option>
          </el-select>

          <el-button type="primary" class="control-item" @click="enableSerialPort">打开串口</el-button>
          <el-button type="danger" class="control-item" @click="disableSerialPort">关闭串口</el-button>
        </div>

        <br>

        <br>
        <div class="flex-container" id="table1">
          
          <!-- :row-class-name  用于赋值每一行的class名，用于添加背景色 -->
          <el-table :data="tableData" border :row-class-name="tableAddClass" style="width: 100%">
            <el-table-column prop="describe" label="寄存器地址含义  ">
            </el-table-column>
            <el-table-column prop="address" label="寄存器地址" width="180">
            </el-table-column>
            <el-table-column prop="value" label="值" width="180">
              <template slot-scope="scope">
                <el-input v-model="scope.row.value" @change="singleValue(scope.row)" @focus="clearThisTimeout()"
                  @blur="scheduleFetch('read');"></el-input>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </el-main>
      </el-container>

    </div>
  </template>
  
  <script>
import axios from 'axios';

  export default {
    data() {
    return {
      input: '',
      // locationValue:'',
      model: '',
      // 初始化tableData为数组
      tableData: [],
      tableData1: [], // 存储第二种数据的数组
      // tableData1: [{ "address": "2402", "value": 22 }],
      timeoutId: null, // 用于存储setTimeout的ID，以便在组件销毁时清除
      flag: false,
      // activeIndex: '1',
      activeIndex: '2',
      selectPort: '',
      ports: [], // 用于存储从后端接收的选项
    };
  },
  methods: {
    tableAddClass({ row }) {

      switch (row.address) {
        case '2602':
        case '2604':
        case '2606':
        case '2608':
        case '2610':
        case '2612':
        case '2614':
        case '2616':
        case '2618':
        case '2620':
        case '2622':
        case '2624':
          return 'axis';

        case '2500':
          return 'workModel';

        case '2503':
        case '2504':
        case '2505':
        case '2506':
        case '2507':
        case '2508':
          return 'time';

        case '2810':
        case '2812':
        case '2814':
        case '2816':
        case '2818':
        case '2820':
          return 'push';

        case '2410':
        case '2411':
        case '2412':
          return 'SPA';


        case '2414':
        case '2415':
        case '2416':
          return 'heliostatParam';

        case '2417':
        case '2418':
        case '2419':
          return 'sunParam';
          
        case '2420':
        case '2421':
          return 'motorSpeed';

        case '2423':
        case '2424':
        case '2425':
        case '2452':
        case '2456':
          return 'azimuthParam';
        case '2426':
        case '2427':
        case '2428':
        case '2450':
        case '2454':
          return 'elevatingParam';

        case '2001':
        case '2002':
        case '2003':
        case '2004':
        case '2005':
        case '2006':
        case '2007':
        case '2008':
        case '2009':
        case '2010':
        case '2011':
        case '2012':
        case '2013':
        case '2014':
        case '2015':
        case '2016':
        case '2017':
        case '2018':
        case '2019':
          return 'highlight';

        default:
          return ''; // 如果address不匹配任何case，返回默认解释  
      }
      // if (row.address === '2401') {
      //      console.log("row.address === '2401'",rowIndex);
      //       // return 'current-row';
      //       return 'highlight';
      //     }
      //     return '';


    },

    getPorts() {
      axios.get('http://localhost:8081/serialPort/getPorts')
        .then(response => {
          // 处理响应
          console.log(response);
          this.ports = response.data.data;
          this.$message(response.data.message);
        })
        .catch(error => {
          // 处理错误
          console.error('获取串口名错误，请联系管理员', error);
        });
    },

    singleValue(row) {
      // this.$message('执行下发数据');
      const postData = {
        address: row.address, // 从当前行获取寄存器地址
        value: row.value  // 从当前行获取值
      };

      axios.post('http://localhost:8081/serialPort/setValue', postData)
        .then(response => {
          // 处理响应
          console.log(response);
          // 设置1秒的延迟
          this.timeoutId = setTimeout(() => {
            this.check(postData);
          }, 500);
        })
        .catch(error => {
          // 处理错误
          console.error('数据下发接口请求失败，请联系管理员', error);
        });
    },

    check(addrAndValue) {
      axios.post('http://localhost:8081/serialPort/check', addrAndValue)
        .then(response => {
          // 处理响应
          console.log(response);
          this.$message(response.data.message);
        })
        .catch(error => {
          // 处理错误
          console.error('数据检验接口请求失败，请联系管理员', error);
        });
    },




    fetchData(type) {
      const url = type === 'read' ? 'http://localhost:8081/hc/timed/getRead' : 'http://localhost:8081/hc/timed/getReadAndWrite';
      return axios.get(url)
        .then(response => {
          const dataObj = response.data.data;
          const tableData = Object.keys(dataObj).map(address => {
            const describe = this.getDescribeByAddress(address);
            return {
              address: address,
              value: this.conConversion(address, dataObj[address]),
              // 这里可以根据实际情况提供描述信息
              describe: describe
            };
          });
          if (type === 'read') {
            this.tableData = tableData;
          } else {
            this.tableData1 = tableData;
          }
        })
        .catch(error => {
          console.error('Error:', error);
        });
    },

    conConversion(address, value) {
      if (address == 2400 | address == 2401 | address == 2402 | address == 2403) {
        // 确保value是一个16位的二进制字符串
        let binaryString = value.toString(2);
        // 根据需要的位数进行填充
        binaryString = binaryString.padStart(16, '0');

        // 创建一个数组来存储带有空格的二进制字符串的字符
        let binaryStringWithSpaces = [];
        // 每四个字符插入一个空格
        for (let i = 0; i < binaryString.length; i++) {
          binaryStringWithSpaces.push(binaryString[i]);
          if ((i + 1) % 4 === 0 && i !== binaryString.length - 1) {
            binaryStringWithSpaces.push(' '); // 在每四位后添加空格
          }
        }

        // 将数组元素连接成字符串
        return binaryStringWithSpaces.join('');
      } else {
        return value;
      }
    },


    // 根据address获取描述信息的方法
    getDescribeByAddress(address) {
      switch (address) {
        case '2001':
          return '地理时区';
        case '2002':
          return '海拔高度';
        case '2003':
          return '大气折射';
        case '2004':
          return '地理纬度';
        case '2005':
          return '地理经度';
        case '2006':
          return '年平均温度';
        case '2007':
          return '年平均压力';
        case '2008':
          return '大风方位角';
        case '2009':
          return '大风高度角';
        case '2010':
          return '开场高度角度';
        case '2011':
          return '关场方位角';
        case '2012':
          return '关场高度角';
        case '2013':
          return '正午前清洗方位角';
        case '2014':
          return '正午前清洗高度角';
        case '2015':
          return '正午后清洗方位角';
        case '2016':
          return '正午后清洗方位角';
        case '2017':
          return '定日镜方位角初始角';
        case '2018':
          return '定日镜高度角初始角';
        case '2019':
          return '间断跟踪间隔时间';
        case '2020':
          return '方位角修正值1';
        case '2021':
          return '方位角修正值2';

        case '2022':
          return '方位角修正值3';
        case '2023':
          return '方位角修正值4';
        case '2024':
          return '方位角修正值5';
        case '2025':
          return '方位角修正值6';
        case '2026':
          return '方位角修正值7';
        case '2027':
          return '方位角修正值8';
        case '2028':
          return '方位角修正值9';
        case '2029':
          return '方位角修正值10';
        case '2030':
          return '方位角修正值11';
        case '2031':
          return '方位角修正值12';
        case '2032':
          return '方位角修正值13';
        case '2033':
          return '方位角修正值14';
        case '2034':
          return '方位角修正值15';
        case '2035':
          return '方位角修正值16';
        case '2036':
          return '方位角修正值17';
        case '2037':
          return '方位角修正值18';
        case '2038':
          return '方位角修正值19';
        case '2039':
          return '方位角修正值20';
        case '2040':
          return '方位角修正值21';
        case '2041':
          return '方位角修正值22';
        case '2042':
          return '方位角修正值23';
        case '2043':
          return '方位角修正值24';
        case '2044':
          return '方位角修正值25';
        case '2045':
          return '方位角修正值26';
        case '2046':
          return '方位角修正值27';
        case '2047':
          return '方位角修正值28';
        case '2048':
          return '方位角修正值29';
        case '2049':
          return '方位角修正值30';
        case '2050':
          return '方位角修正值31';
        case '2051':
          return '方位角修正值32';
        case '2052':
          return '方位角修正值33';
        case '2053':
          return '方位角修正值34';
        case '2054':
          return '方位角修正值35';
        case '2055':
          return '方位角修正值36';
        case '2056':
          return '方位角修正值37';
        case '2057':
          return '方位角修正值38';
        case '2058':
          return '方位角修正值39';
        case '2059':
          return '方位角修正值40';
        case '2060':
          return '方位角修正值41';
        case '2061':
          return '方位角修正值42';
        case '2062':
          return '方位角修正值43';
        case '2063':
          return '方位角修正值44';
        case '2064':
          return '方位角修正值45';
        case '2065':
          return '方位角修正值46';
        case '2066':
          return '方位角修正值47';
        case '2067':
          return '方位角修正值48';
        case '2068':
          return '高度角修正值1';
        case '2069':
          return '高度角修正值2';
        case '2070':
          return '高度角修正值3';
        case '2071':
          return '高度角修正值4';
        case '2072':
          return '高度角修正值5';
        case '2073':
          return '高度角修正值6';
        case '2074':
          return '高度角修正值7';
        case '2075':
          return '高度角修正值8';
        case '2076':
          return '高度角修正值9';
        case '2077':
          return '高度角修正值10';
        case '2078':
          return '高度角修正值11';
        case '2079':
          return '高度角修正值12';
        case '2080':
          return '高度角修正值13';
        case '2081':
          return '高度角修正值14';
        case '2082':
          return '高度角修正值15';
        case '2083':
          return '高度角修正值16';
        case '2084':
          return '高度角修正值17';
        case '2085':
          return '高度角修正值18';
        case '2086':
          return '高度角修正值19';
        case '2087':
          return '高度角修正值20';
        case '2088':
          return '高度角修正值21';
        case '2089':
          return '高度角修正值22';
        case '2090':
          return '高度角修正值23';
        case '2091':
          return '高度角修正值24';
        case '2092':
          return '高度角修正值25';
        case '2093':
          return '高度角修正值26';
        case '2094':
          return '高度角修正值27';
        case '2095':
          return '高度角修正值28';
        case '2096':
          return '高度角修正值29';
        case '2097':
          return '高度角修正值30';
        case '2098':
          return '高度角修正值31';
        case '2099':
          return '高度角修正值32';
        case '2100':
          return '高度角修正值33';
        case '2101':
          return '高度角修正值34';
        case '2102':
          return '高度角修正值35';
        case '2103':
          return '高度角修正值36';
        case '2104':
          return '高度角修正值37';
        case '2105':
          return '高度角修正值38';
        case '2106':
          return '高度角修正值39';
        case '2107':
          return '高度角修正值40';
        case '2108':
          return '高度角修正值41';
        case '2109':
          return '高度角修正值42';
        case '2110':
          return '高度角修正值43';
        case '2111':
          return '高度角修正值44';
        case '2112':
          return '高度角修正值45';
        case '2113':
          return '高度角修正值46';
        case '2114':
          return '高度角修正值47';
        case '2115':
          return '高度角修正值48';
        case '2116':
          return '通讯端口1';
        case '2117':
          return '通讯端口2';
        case '2118':
          return '控制器CAN地址1';
        case '2119':
          return '控制器CAN地址1';
        case '2120':
          return '控制器CAN地址3';
        case '2121':
          return '控制器CAN地址4';
        case '2122':
          return 'CAN通讯速率';
        case '2123':
          return '控制器地址';
        case '2124':
          return 'CAN通讯速率';
        case '2125':
          return '控制器编号';
        case '2126':
          return '控制器镜组编号';
        case '2127':
          return '设定参数备用';
        case '2128':
          return '设定参数备用';
        case '2129':
          return '设定参数备用';
        case '2130':
          return '设定参数备用';
        case '2131':
          return '设定参数备用';
        case '2132':
          return '设定参数备用';
        case '2133':
          return '设定参数备用';
        case '2134':
          return '设定参数备用';
        case '2135':
          return '设定参数备用';
        case '2136':
          return '设定参数备用';
        case '2500':
          return '工作模式';
        case '2501':
          return '远方手动方位角';
        case '2502':
          return '远方手动高度角';
        case '2503':
          return '年';
        case '2504':
          return '月';
        case '2505':
          return '日';
        case '2506':
          return '时';
        case '2507':
          return '分';
        case '2508':
          return '秒';
        case '2509':
          return '备用参数';
        case '2600':
          return '时间戳';
        case '2602':
          return '目标点X坐标';
        case '2604':
          return '目标点Y坐标';
        case '2606':
          return '目标点Z坐标';
        case '2608':
          return '定日镜X坐标';
        case '2610':
          return '定日镜Y坐标';
        case '2612':
          return '定日镜Z坐标';
        case '2614':
          return '待机点X坐标';
        case '2616':
          return '待机点Y坐标';
        case '2618':
          return '待机点Z坐标';
        case '2620':
          return '校正点X坐标';
        case '2622':
          return '校正点Y坐标';
        case '2624':
          return '校正点Z坐标';
        case '2626':
          return '上镜路径x1';
        case '2628':
          return '上镜路径x2';
        case '2630':
          return '上镜路径x3';
        case '2632':
          return '上镜路径x4';
        case '2634':
          return '上镜路径x5';
        case '2636':
          return '上镜路径x6';
        case '2638':
          return '上镜路径x7';
        case '2640':
          return '上镜路径x8';
        case '2642':
          return '上镜路径x9';
        case '2644':
          return '上镜路径x10';
        case '2646':
          return '上镜路径x11';
        case '2648':
          return '上镜路径x12';
        case '2650':
          return '上镜路径x13';
        case '2652':
          return '上镜路径x14';
        case '2654':
          return '上镜路径x15';
        case '2656':
          return '上镜路径x16';
        case '2658':
          return '上镜路径x17';
        case '2660':
          return '上镜路径x18';
        case '2662':
          return '上镜路径x19';
        case '2664':
          return '上镜路径x20';
        case '2666':
          return '上镜路径x21';
        case '2668':
          return '上镜路径x22';
        case '2670':
          return '上镜路径x23';
        case '2672':
          return '上镜路径x24';
        case '2674':
          return '上镜路径x25';
        case '2676':
          return '上镜路径x26';
        case '2678':
          return '上镜路径x27';
        case '2680':
          return '上镜路径x28';
        case '2682':
          return '上镜路径x29';
        case '2684':
          return '上镜路径x30';

        case '2686':
          return '上镜路径y1';
        case '2688':
          return '上镜路径y2';
        case '2690':
          return '上镜路径y3';
        case '2692':
          return '上镜路径y4';
        case '2694':
          return '上镜路径y5';
        case '2696':
          return '上镜路径y6';
        case '2698':
          return '上镜路径y7';
        case '2700':
          return '上镜路径y8';
        case '2702':
          return '上镜路径y9';
        case '2704':
          return '上镜路径y10';
        case '2706':
          return '上镜路径y11';
        case '2708':
          return '上镜路径y12';
        case '2710':
          return '上镜路径y13';
        case '2712':
          return '上镜路径y14';
        case '2714':
          return '上镜路径y15';
        case '2716':
          return '上镜路径y16';
        case '2718':
          return '上镜路径y17';
        case '2720':
          return '上镜路径y18';
        case '2722':
          return '上镜路径y19';
        case '2724':
          return '上镜路径y20';
        case '2726':
          return '上镜路径y21';
        case '2728':
          return '上镜路径y22';
        case '2730':
          return '上镜路径y23';
        case '2732':
          return '上镜路径y24';
        case '2734':
          return '上镜路径y25';
        case '2736':
          return '上镜路径y26';
        case '2738':
          return '上镜路径y27';
        case '2740':
          return '上镜路径y28';
        case '2742':
          return '上镜路径y29';
        case '2744':
          return '上镜路径y30';
        case '2746':
          return '上镜路径z1';
        case '2748':
          return '上镜路径z2';
        case '2750':
          return '上镜路径z3';
        case '2752':
          return '上镜路径z4';
        case '2754':
          return '上镜路径z5';
        case '2756':
          return '上镜路径z6';
        case '2758':
          return '上镜路径z7';
        case '2760':
          return '上镜路径z8';
        case '2762':
          return '上镜路径z9';
        case '2764':
          return '上镜路径z10';
        case '2766':
          return '上镜路径z11';
        case '2768':
          return '上镜路径z12';
        case '2770':
          return '上镜路径z13';
        case '2772':
          return '上镜路径z14';
        case '2774':
          return '上镜路径z15';
        case '2776':
          return '上镜路径z16';
        case '2778':
          return '上镜路径z17';
        case '2780':
          return '上镜路径z18';
        case '2782':
          return '上镜路径z19';
        case '2784':
          return '上镜路径z20';
        case '2786':
          return '上镜路径z21';
        case '2788':
          return '上镜路径z22';
        case '2790':
          return '上镜路径z23';
        case '2792':
          return '上镜路径z24';
        case '2794':
          return '上镜路径z25';
        case '2796':
          return '上镜路径z26';
        case '2798':
          return '上镜路径z27';
        case '2800':
          return '上镜路径z28';
        case '2802':
          return '上镜路径z29';
        case '2804':
          return '上镜路径z30';
        case '2806':
          return '控制器IP地址1';
        case '2808':
          return '控制器子网掩码1';
        case '2810':
          return '推杆单圈行进距离mm';
        case '2812':
          return '推杆OA';
        case '2814':
          return '推杆OB';
        case '2816':
          return '推杆AB';
        case '2818':
          return '方位角减速机速比';
        case '2820':
          return '高度角减速机速比';
        case '2822':
          return '设定数据备用1';
        case '2400':
          return '系统故障状态';
        case '2401':
          return '定日镜运行状态';
        case '2402':
          return '方位角驱动器及电机状态';
        case '2403':
          return '高度角驱动器及电机状态';
        case '2404':
          return '系统运行状态L/R';
        case '2405':
          return '备用1';
        case '2406':
          return '备用2';
        case '2407':
          return '备用3';
        case '2408':
          return 'CAN通讯延迟';
        case '2409':
          return '无线通讯延迟';
        case '2410':
          return 'SPA定日镜天顶角(目标值）';
        case '2411':
          return 'SPA定日镜高度角(目标值）';
        case '2412':
          return 'SPA定日镜方位角(目标值）';
        case '2413':
          return '槽式聚光器跟踪角度(目标值)';
        case '2414':
          return '定日镜天顶角(当前值）';
        case '2415':
          return '定日镜高度角(当前值）';
        case '2416':
          return '定日镜方位角(当前值）';
        case '2417':
          return '当前太阳高度角';
        case '2418':
          return '当前太阳方位角';
        case '2419':
          return '当前太阳方位角180°';
        case '2420':
          return '当前高度角电机转速';
        case '2421':
          return '当前方位角电机转速';
        case '2422':
          return '槽式聚光器跟踪角度(当前值)';
        case '2423':
          return '方位角驱动供电电压mV';
        case '2424':
          return '方位角驱动温度0.01°';
        case '2425':
          return '方位角驱动电机电流mA';
        case '2426':
          return '高度角驱动供电电压mV';
        case '2427':
          return '高度角驱动温度0.01°';
        case '2428':
          return '高度角驱动电机电流mA';
        case '2450':
          return '高度角当前值pulse';
        case '2452':
          return '方位角当前值pulse';
        case '2454':
          return '高度角目标脉冲';
        case '2456':
          return '方位角目标脉冲';




        default:
          return address; // 如果address不匹配任何case，返回默认解释
      }
    },
    // 打开指定串口
    enableSerialPort() {
      // 假设你已经有一个函数来获取端口号，这里用this.input代替
      const port = this.selectPort;

      // 发起GET请求
      axios.get(`http://localhost:8081/serialPort/enable/hc/${port}`)
        .then(response => {
          // 接口调用成功
          console.log(response.data);
          // 弹出提示框
          this.$message(response.data.message);

          // 开始请求数据
          // todo 记得开启
          this.scheduleFetch('read');
        })
        .catch(error => {
          // 接口调用失败
          console.error('Error:', error);
          // 这里可以根据需要处理错误
        });
    },

    // 关闭串口
    disableSerialPort() {
      // 发起GET请求
      axios.get(`http://localhost:8081/serialPort/disable`)
        .then(response => {
          // 接口调用成功
          console.log(response.data);
          // 这里可以根据需要处理响应数据
          this.$message(response.data.message);
          // 串口关闭后，清除定时器
          this.clearThisTimeout();
        })
        .catch(error => {
          // 接口调用失败
          console.error('Error:', error);
          // 这里可以根据需要处理错误
        });
    },

    clearThisTimeout() {
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
        this.timeoutId = null; // 重置timeoutId
      }
    }
    ,
    scheduleFetch(type) {
      // 清除之前的定时器
      if (this.timeoutId) {
        clearTimeout(this.timeoutId);
      }

      // 设置一个1秒的延迟，然后执行请求
      this.timeoutId = setTimeout(() => {
        this.fetchData(type)
          .then(() => {
            // 请求成功后，1秒后执行下一个请求类型
            this.timeoutId = setTimeout(() => {
              this.scheduleFetch(type === 'read' ? 'readAndWrite' : 'read');
            }, 500);
          });
      }, 500); // 这里1000表示1秒，即启动scheduleFetch方法时先暂停1秒
    }

  },

  // 钩子函数
  mounted() {
    console.log("start");
    // this.fetchOptions();
    this.getPorts();
  },
  beforeDestroy() {
    // Vue组件销毁前清除定时器和timeoutId
    this.disableSerialPort();
    this.clearThisTimeout();
    // Vue组件销毁前清除定时器和timeoutId
    if (this.timeoutId) {

      clearTimeout(this.timeoutId);
      this.timeoutId = null; // 重置timeoutId
    }
  }
};
  </script>
  <style>
  .el-table .highlight {
  background-color: #85d89b !important;
}

.el-table .workModel {
  background-color: #e78c8c !important;
}

.el-table .SPA {
  background-color: #f5dd90 !important;
}

.el-table .axis {
  background-color: #90f5dc !important;
}

.el-table .time {
  background-color: #90c4f5 !important;
}

.el-table .push {
  background-color: #f59090 !important;
}

.el-table .heliostatParam {
  background-color: #90eef5 !important;
}

.el-table .sunParam {
  background-color: #90f5a6 !important;
}

.el-table .motorSpeed {
  background-color: #f5c190 !important;
}

.el-table .azimuthParam {
  background-color: #80f185 !important;
}

.el-table .elevatingParam {
  background-color: #f5f390 !important;
}
  </style>